<template>
  <div>
    <breadcrumb-nav menu1="客户管理" menu2="客户详情"></breadcrumb-nav>
    <el-card>
      <div slot="header" class="clearfix">
        <el-page-header @back="goBack" content="客户详情"></el-page-header>
      </div>
      <el-row>
        <el-col :sm="12" :md="8" :lg="6">
          <p>客户名称：{{customer.name}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>国家/地区：{{customer.country}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>公司名称：{{customer.company}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>邮箱：{{customer.email}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>手机：{{customer.mobile}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>skype：{{customer.skype}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>whatsapp：{{customer.whatsapp}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>重要程度：{{customer.star}}</p>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <p>跟单人：{{customer.follower}}</p>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="record-card">
        <div slot="header" class="clearfix">
          <span>记录明细</span>
        </div>
        <el-timeline>
          <el-timeline-item :timestamp="record.createDate" placement="top" v-for="record in customer.records" :key="record.id">
            <el-card class="detail-card">
              <div class="text item" v-html="record.content"></div>
              <p>{{record.createByName}} 提交于 {{record.createDate}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      customer: {}
    }
  },
  methods: {
    getCustomerDetail() {
      // console.log(this.$route.params.id)
      this.$http.get(`customers/${this.$route.params.id}/records`)
        .then(resp => {
          if (resp.code !== 200) this.$message.error('数据获取失败！')
          this.customer = resp.data
          console.log(this.customer)
        })
        .catch(err => console.log(err))
    },
    goBack() {
      this.$router.back()
    }
  },
  created() {
    this.getCustomerDetail()
  }
}
</script>

<style lang="less">
  .record-card {
    margin-top: 20px;
    .el-card__header{
      background-color: darkgray;
    }
  }

  .detail-card {
    background-color: lightyellow;
  }
</style>
